<!--
* @Author: white_queen
* @Date: 2024-07-16 14:59:41
* @LastEditors: white_queen
* @LastEditTime: 2024-07-18 19:12:17
* @FilePath: /pages/shopping/inddex/inddex.vue
* @Description: 购物车模块
-->
<template>
	<view>
		<sideslip-car
			ref="mycar"
			@selAllBtn="selAllBtn"
			@delBtn="delBtn"
			@touchEv="touchEv"
			class="sideslip-car"
			@selThis="selThis"
			@jsBtn="jsBtn"
			@changeNum="changeNum"
			:carts="list"
		></sideslip-car>
	</view>
</template>

<script>
import httpApi from '../../../http';
import sideslipCar from '@/components/sideslip-car/sideslip-car.vue';
export default {
	components: {
		sideslipCar
	},
	onLoad() {
		this.init();
	},
	data() {
		return {
			list: [] // 购物车列表
		};
	},
	methods: {
		init() {
			httpApi.ShoppingApi.getCartList({}).then((res) => {
				console.log(res);
				for (let item of res.data) {
					item.isTouchMove = false;
					item.selected = false;
				}
				this.list = res.data;
			});
		},
		// 结算 返回值：商品数组
		jsBtn: function (items) {
			console.log(items);
			let ids = [];
			for (let item of items) {
				ids.push(item.id);
			}
			let data = {
				ids: ids.join(',')
			};
			uni.navigateTo({
				url: '/pages/shopping/pay/pay?params=' + JSON.stringify(data)
			});
		},
		changeNum: function (carts, cart_id, buy_num) {
			httpApi.ShoppingApi.changeBuyNum({ cart_id, buy_num }).then((res) => {
				console.log(res);
				this.init();
				this.$refs.mycar.getTotalPrice();
			});
			// this.list = carts;
		},
		selThis: function (carts) {
			this.list = carts;
			this.$refs.mycar.getTotalPrice();
		},
		selAllBtn: function (carts) {
			this.list = carts;
			this.$refs.mycar.getTotalPrice();
		},
		touchEv: function (carts) {
			this.list = carts;
		},
		delBtn: function (carts, ids, index) {
			httpApi.ShoppingApi.delCartItem({ ids }).then((res) => {
				console.log(res);
				this.init();
				this.$refs.mycar.getTotalPrice();
			});
		}
	}
};
</script>

<style lang="scss"></style>
<style>
page {
	background: #f5f5f5;
}
view,
textarea,
input,
text,
button {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: '微软雅黑';
}
.uni-checkbox-input {
	border-radius: 50% !important;
}
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	background: #f5f5f5;
	overflow: hidden;
}
.line1 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: box;
	display: -webkit-box;
	line-clamp: 1;
	box-orient: vertical;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	word-break: break-all; /* 英文换行问题 */
}
.line2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: box;
	display: -webkit-box;
	line-clamp: 2;
	box-orient: vertical;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-all; /* 英文换行问题 */
}
.centerboth {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
}
.clearfix:after {
	content: '';
	display: block;
	visibility: hidden;
	height: 0;
	clear: both;
}

.clearfix {
	zoom: 1;
}
image {
	padding: 0;
	margin: 0;
}
textarea {
	width: 300rpx;
	height: 75rpx;
	display: block;
	position: relative;
	font-size: 28rpx;
}
button::after {
	border: none;
}
input:-ms-input-placeholder {
	color: #808080;
}
.container {
	background: #f5f5f5;
}
.container {
	width: 100%;
	padding: 0 24rpx;
}
.sideslip-car {
	width: 100%;
}
</style>